<template>
  <CardDialog v-model:visible="show" width="1000px" title="视频回放" @close="close">
    <div class="play-back-video">
      <VideoPlayer :videoUrl="videoUrl" :id="`back_play_video`" />
      <!-- <jessibucaPlayer
        ref="jessibuca"
        :videoUrl="videoUrl"
        :error="videoError"
        :message="videoError"
        :hasAudio="hasAudio"
        domId="play_back_video"
        fluent
        autoplay
        live
        @updateSpeed="updateSpeed"
      /> -->
    </div>
  </CardDialog>
</template>

<script setup>
  import { ref } from 'vue';
  import CardDialog from '/@/components/cardDialog/index.vue';
  import VideoPlayer from '/@/components/video/speed.vue';
  // import jessibucaPlayer from '/@/components/jessibuca/playBack.vue';
  import { api as cameraApi } from '/@/api/plat/camera.js';
  import { api as playbackApi } from '/@/api/wvp/playback.js';
  import { dateFormat } from '/@/utils/date.js';

  const show = ref(false);
  const videoUrl = ref('');
  const hasAudio = ref(false);
  let streamInfo = null;
  let eventInfo = {};

  const videoError = function (e) {
    console.log('播放器错误：' + JSON.stringify(e));
  };

  function open(row) {
    eventInfo = row;
    show.value = true;
    videoUrl.value = row.mp4Url + '/' + dateFormat(row.startTime, 'yyyyMMdd') + '/' + row.videoId + '.mp4';
  }

  function getUrlByStreamInfo() {
    if (location.protocol === 'https:') {
      return streamInfo['wss_flv'];
    } else {
      return streamInfo['ws_flv'];
    }
  }

  function close() {
    // 调用stop，停止拉流了
    const formatDate = (dateString) => dateString.replace(/[-: ]/g, '');
    const formattedB = formatDate(eventInfo.startTime);
    const formattedC = formatDate(eventInfo.endTime);
    const result = `${eventInfo.playbackStreamUrl}/${eventInfo.playbackStreamUrl.replace(/\//g, '_')}_${formattedB}_${formattedC}`;
    // playbackApi.stopPlayBack(result).then(() => {});
    videoUrl.value = null;
    hasAudio.value = false;
  }

  function updateSpeed(speed) {
    const formatDate = (dateString) => dateString.replace(/[-: ]/g, '');
    const formattedB = formatDate(eventInfo.startTime);
    const formattedC = formatDate(eventInfo.endTime);
    const result = `${eventInfo.playbackStreamUrl.replace(/\//g, '_')}_${formattedB}_${formattedC}/${speed}`;
    // playbackApi.playbackSpeed(result).then(() => {});
  }

  defineExpose({ open });
</script>

<style lang="less" scoped>
  .play-back-video {
    width: 100%;
    height: 60vh;
    padding: 0 0 20px;
  }
</style>
